<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div class="btn">边框移动</div>
			
			<div class="span">
				<span class="span1">1</span>
				<span class="span2">2</span>
			</div>
		</div>
	</body>
	
	<style>
		.btn{
			width: 120px;
			height: 60px;
			border: 5px solid blue;
			text-align: center;
			position: absolute;
			line-height: 60px;
		}
	
		.btn::before,.btn::after{
			content: "";
			width: 15px;
			height: 5px;
			position: absolute;
			transition: all 0.5s;
			transform: skew(50deg);
			background-color: #FFFFFF;
		}
		
		.btn::before{
			top: -5px;
			left: 20px;
		}
		.btn::after{
			top: 60px;
			left: 80px;
		}
		.btn:hover.btn::before{
			transform: translateX(60px) skew(50deg);
		}
		.btn:hover.btn::after{
			transform: translateX(-60px) skew(50deg);
		}
		
		.span{
			position: absolute;
			top: 100px;
		}
		.span1,.span2{
			display: inline-block;
			text-align: center;
			width: 30px;
		}
		.btn:hover+.span{
			background-color: red;
		}
	</style>
</html>
